<template>
    <div class="profile">
        <div class="profile-banner" v-if="!hasPermission">
            <span class="photo"></span>
            <cube-button :light="true" class="btn" @click="toLogin">登录</cube-button>
        </div>
        <div class="profile-banner" v-else>
            <span class="photo"></span>
            <span class="btn-user">{{user.username}}</span>
        </div>
         <ul class="profile-list">   
            <router-link tag="li" v-for="menu in user.menuList" :to="menu.path" :key="menu.path">
                {{menu.name}} 
            </router-link>     
        </ul>     
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
    computed: {
        ...mapState(['user','hasPermission'])
    },
    methods: {
        toLogin(){
            //得记录现在页面的路由链接
            this.$router.push({path:'/login',query:{from:"/profile"}})
        }
    },
}
</script>
<style lang="less" scoped>
.profile{
    &-banner{
        height: 200px;
        background: url('../../assets/images/user_bg.png');
        background-color: blue;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:aliceblue;
        .photo{
            background: url('../../assets/images/photo.png');
            display: block;
            width: 80px;
            height: 80px;
            background-size:cover;
        }
        .btn{
            margin-top:20px;
            width: 80px;
            height: 45px;
            font-weight: bold;
        }
        .btn-user{
            display: inline-block;
            color:#fff;
            margin-top:20px;
        }
    }
    &-list {
        font-size: 14px;
        line-height: 30px;

    li {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid #ccc; 
      padding: 10px 25px;
    }
  }
}
</style>